<template>
    <div>
<h1>显示会员等级信息</h1>


会员等级名称:<input type="text" v-model="kname" placeholder="请输入会员名称">
会员状态:<select v-model="zt">
    <option value="0">请选择</option>
    <option value="2">启用</option>
    <option value="1">禁用</option>
</select>

<input type="button" value="查询" @click="pb">
<input type="button" value="添加会员权益" @click="qytz">
<table class="table table-bordered" border="1">
    <thead>
    <tr style="background-color: aqua;">
        <td>编号</td>
        <td>名字</td>
        <td>状态</td>
        <td>最小值</td>
        <td>最大值</td>
    </tr>
</thead>
<tbody>
    <tr v-for="item in xz">
        <td>{{ item.rank_id }}</td>
        <td>{{ item.rank_name }}</td>
        <td>{{ item.rank_zt==true?'启用':'禁用' }}</td>
        <td>{{ item.rank_min }}</td>
        <td>{{ item.rank_max }}</td>
        <td><a href="#" v-show="item.rank_zt==false" @click="sahod(item.rank_id)">启用</a>
            <a href="#" v-show="item.rank_zt==true" @click="sahod(item.rank_id)">禁用</a>
        </td>
    </tr>
</tbody>
</table>

<span>
    当前共{{fy.totacount}}条数据,每页显示{{fy.szie}},当前是第{{fy.index}}/{{fy.pagecount}}页

    <a href="#" style="margin-right: 10px;" @click="swhy('a')">首页</a>
    <a href="#" style="margin-right: 10px;" @click="swhy('b')">上一页</a>
    <a href="#" style="margin-right: 10px;" @click="swhy('c')">下一页</a>
    <a href="#" style="margin-right: 10px;" @click="swhy('d')">尾页</a>
</span>

<select v-model="cszie" @change="chanszie">
    <option :value="1">1条/页</option>
    <option :value="2">2条/页</option>
    <option :value="3">3条/页</option>
</select>

<input type="text" style="width: 40px;" v-model="newyem">
<input type="button" value="跳转" @click="getinf">
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const newyem=ref("");
const kname=ref("");
const  zt=ref(0);

const djaio=useRouter();

const cszie=ref(1);
const  fy=ref({

index:1,
szie:2,
totacount:0,
pagecount:0


})




const xz=ref([{



    rank_id: 0,
  rank_name: "",
  rank_zt: true,
  rank_min: 0,
  rank_max: 0


}])

onMounted(()=>{


    pb();
})


const pb=()=>{

axios.get('https://localhost:7268/api/hy/showsearchran',
{

    params:
    {
        name:kname.value,
        zt:zt.value,
        pageindex:fy.value.index,
        pageszie:fy.value.szie

    }
})
.then(res=>{

    console.log(res.data)
    xz.value=res.data.pagedate

    fy.value.totacount=res.data.totalcount

    fy.value.pagecount=res.data.pagecount


})
.catch(error=>{

    console.log(error);
    
})



}


const swhy=(shuj:string)=>{
switch (shuj) {
    case 'a':
    fy.value.index=1 
    pb();
        break;

        case 'b':
     if( fy.value.index>1)
     {

        fy.value.index--
        pb();

     }
     else{

   alert('当前第一页');
     }
        break;

        case 'c':
     if( fy.value.index<fy.value.pagecount)
     {

        fy.value.index++
        pb()

     }
     else{

alert('当前最后一页');
  }
        break;
        case 'd':
    fy.value.index=fy.value.pagecount
    pb()

        break;
   
}
    
}


const chanszie=()=>{

fy.value.szie=cszie.value;

pb();
}

const getinf=()=>{

    var fyid =newyem.value;
    if(fyid=="")
{

    alert('未填写跳转页码');
    newyem.value=="";
    return;
}

if(isNaN(Number(fyid)))
{

    alert('输入内容必须为数字');
    newyem.value=="";
    return;
}

if(Number(fyid)<1)
{

    alert('跳转页码必须大于0');
    newyem.value=="";
    return;
}
if(Number(fyid)>fy.value.pagecount)
{

    alert('跳转页码不能大于总页码');
    newyem.value=="";
    return;
}


    fy.value.index=Number(fyid);
    pb();

}

const sahod=(adjid:number)=>{
axios.get('https://localhost:7268/api/hy/jdiasodja',
{
params:{

    id:adjid
}
   
    
})
.then(res=>{

if(res.data>0)
alert('修改成功');

else{
    alert('修改失败');

}
pb();
})
.catch(error=>{

    console.log(error);
})


}


const qytz=()=>{

    djaio.push('/zjadd');

}

</script>

<style scoped>

</style>